<template>
  <div class="profile-page">

    <div class="user-info">
      <div class="container">
        <div class="row">

          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{profile.username}}</h4>
            <p>
              {{profile.bio}}
            </p>
            <button v-if="user.username!==profile.username" class="btn btn-sm btn-outline-secondary action-btn" :disabled="followDisabled" @click="onFollowUser">
              <i class="ion-plus-round"></i>
              &nbsp;
              {{profile.following ? 'Unfollow' : 'Follow'}} {{profile.username}}
            </button>
            <button v-else class="btn btn-sm btn-outline-secondary action-btn" @click="editProfile">
              <i class="ion-gear-a"></i>
              &nbsp;
              Edit Profile Settings
            </button>
          </div>

        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <nuxt-link
                  class="nav-link"
                  :class="{
                    active: tab === 'myArticles'
                  }"
                  exact
                  :to="{
                    name: 'profile'
                  }"
                >My Articles</nuxt-link>
              </li>
              <li class="nav-item">
                <nuxt-link
                  class="nav-link"
                  :class="{
                    active: tab === 'myFavorite'
                  }"
                  exact
                  :to="{
                    name: 'profile',
                    query: {
                      tab: 'myFavorite',
                    }
                  }"
                >Favorited Articles</nuxt-link>
              </li>
            </ul>
          </div>

          <article-list :articleList="articles" />

        </div>

      </div>
    </div>

  </div>
</template>

<script>
import {
  getArticles
} from '@/api/article'
import {
  getUser,
  deleteFollow,
  addFollow
} from '@/api/profile'
import ArticleList from '@/pages/components/article-list'
import { mapState } from "vuex";

export default {
  middleware: 'authenticated',
  name: 'UserProfile',
  async asyncData ({query, params}) {
    const page = Number.parseInt(query.page|| 1)
    const limit = 20
    const tab = query.tab || 'myArticles'
    let requestParams = {
      limit,
      offset: (page - 1) * limit,
    }
    if(tab === 'myArticles') {
      requestParams.author = params.username
    } else {
      requestParams.favorited = params.username
    }
    const [ articleRes, userRes ] = await Promise.all([
      getArticles(requestParams),
      getUser(params.username)
    ])
    const { articles, articlesCount } = articleRes.data
    const { profile } = userRes.data
    articles.forEach(article => article.favoriteDisabled = false)
    return {
      articles, // 文章列表
      articlesCount, // 文章总数
      profile,
      limit, // 每页大小
      page, // 页码
      tab, // 选项卡
    }
  },
  data() {
    return {
      followDisabled: false
    }
  },
  computed:{
    ...mapState(['user']),
  },
  components: {
    ArticleList
  },
  watchQuery: ['page', 'tab'],
  methods: {
    async onFollowUser() {
      this.followDisabled = true;
      if (this.profile.following) {
        await deleteFollow(this.profile.username);
        this.profile.following = false
      } else {
        await addFollow(this.profile.username);
        this.profile.following = true
      }
      this.followDisabled = false;
    },
    editProfile() {
      this.$router.push(`/settings`)
    }
  }
}
</script>

<style>

</style>
